<template>
  <Nav>
    {{ $t('hash.nav') }}
  </Nav>
  <div class="page-hash">
    <div class="bj animate__flash animate__animated animate__infinite animate__slow"></div>
    <div class="header">
      <div class="rotate">
        <img src="@/assets/hash/header-ok.png" class="animate__rotate animate__animated animate__infinite animate__slower">
        <div class="icon">
          <img src="@/assets/hash/header-my.png">
        </div>
      </div>
      <div class="hash">
        <md-amount :value="Number(initData.hash_rate)" :precision="0" transition></md-amount>
      </div>
      <div class="hash-name">
        {{ $t('hash.hash_name') }}
      </div>
    </div>
    <div class="content">
      <div class="box">
        <div class="rotate">
          <img src="@/assets/hash/header-no.png" class="animate__rotate animate__animated animate__infinite animate__slower animate__delay-1s">
        </div>
        <div class="hash">
          <div class="name">
            {{ $t('hash.hash_my') }}
          </div>
          <md-amount :value="Number(userData.hash_rate)" :precision="0" transition></md-amount>
        </div>
      </div>
      <div class="box">
        <div class="rotate">
          <img src="@/assets/hash/header-no.png" class="animate__rotate animate__animated animate__infinite animate__slower animate__delay-2s">
        </div>
        <div class="hash">
          <div class="name">
            {{ $t('hash.hash_reward') }}
          </div>
          <md-amount :value="Number(userData.hash_rate_reward)" :precision="0" transition></md-amount>
        </div>
      </div>
      <div class="box" style="background-image: linear-gradient(to left, #2c1f5e, #641657)">
        <div class="rotate">
          <img src="@/assets/hash/header-err.png" class="animate__rotate animate__animated animate__infinite animate__slower animate__delay-3s">
        </div>
        <div class="hash">
          <div class="name">
            {{ $t('hash.hash_over') }}
          </div>
          <md-amount :value="Number(userData.hash_rate_over)" :precision="0" transition></md-amount>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onUnmounted } from 'vue'
import { initData, initUpdate } from '@/model'
import { userData, userInfo } from '@/model/user'
import Nav from '@/components/nav.vue'

// 加载用户算力和全网
const load = () => { 
  userInfo()
  initUpdate()
}

load()

// 全网算力更新
const timer = setInterval(load, 5000)

onUnmounted(() => {
  clearInterval(timer)
})


</script>

<style lang="scss" scoped>
  .page-hash{
    min-height: 100%;
    .bj{
      width: 100%;
      height: 100%;
      position: fixed; 
      background: url('@/assets/hash/bj.png') center center no-repeat;
      background-size: cover;
    }

    .header{
      padding-top: 100px;
      overflow: hidden;
      position: relative;

      img{ 
        width: 100%;
      }

      .rotate{
        width: 150px;
        margin: 0 auto;
        position: relative;

        .icon{
          width: 35px;
          height: 35px;
          position: absolute;
          top: 0;
          bottom: 0;
          right: 0;
          left: 0; 
          margin: auto;
        }
      }

      .hash{
        color: #fff1a1;
        font-size: 30px;
        font-weight: bold;
        text-align: center;
      }
      .hash-name{
        font-size: 14px;
        color: rgba(255, 241, 161, .6);
        padding-top: 5px; 
        text-align: center;
      }
    }

    

    .content{
      min-height: 100%;
      padding: 50px 30px 30px;
      position: relative;
    }

    .box{
      width: 230px;
      margin: 0 auto 30px;
      border-radius: 50px;
      background-image: linear-gradient(to left, #1f235e, #1d0f5e);
      overflow: hidden;

      .hash{
        color: #fff;
        font-size: 20px;
        padding: 10px 0 10PX;
        
        .name{
          font-size: 14px;
          color: rgba(255, 255, 255, .6);
          padding-bottom: 5px;
        }
      }
      .rotate{
        width: 45px;
        height: 45px;
        float: left;
        padding: 10px;
        position: relative;

        img{ 
          width: 100%;
          height: 100%;
        }
      }
    }
  }
</style>